<template>
  <div>
    <Page auto-content-height>
      <FosoCard :showheader="false" :title="title" class="!px-0 !pt-0">
        <FosoForm
          ref="formRef"
          :form-columns="formColumns"
          :form-columns-num="8"
          :form-data="formData"
          :form-expand="true"
          label-position="right"
          label-width="auto"
        />
      </FosoCard>
      <!-- 表格 -->
      <Grid class="!h-[90%]">
        <!-- 表格操作 -->
        <template #action="{ row }">
          <el-button
            :icon="Edit"
            link
            type="primary"
            @click="EditHandle(row)"
          />
          <el-button :icon="Delete" link type="danger" />
        </template>
        <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
        <template #toolbar-buttons>
          <el-button class="ml-auto" type="primary" @click="addApi">
            {{ $t('sys.apis.addApi') }}
          </el-button>
        </template>
      </Grid>
    </Page>
    <!-- 弹窗框 -->
    <Drawer class="w-[40%]" />
  </div>
</template>

<script setup lang="tsx">
import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { Delete, Edit } from '@element-plus/icons-vue';
import { ElTag } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getApiList } from '#/api/sys/api';
import { useTable } from '#/hooks/usetable';

import ExtraDrawer from './components/drawer.vue';
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
// 表单实例
const formRef = ref();
const title = ref('部门管理');
// 表单数据
const formData = ref({
  name: '',
  age: 18,
  gender: '',
  gender2: '',
  gender3: '',
  cascader: [],
  allselect: false,
  gender4: '',
  tree: [], // Tree 组件绑定的数据
});

// 表格获取数据
const getApiListData = async (params: any) => {
  const { page = 1, pageSize = 5 } = params;
  const res: any = await getApiList({ page, pageSize });
  return {
    total: res.total,
    items: res.data,
  };
};

// 设置表头
// 表格配置项
const { tableconfig } = useTable({
  columns: [
    {
      type: 'checkbox',
      width: 50,
    },

    {
      title: $t('sys.apis.path'),
      field: 'path',
    },
    {
      title: $t('sys.apis.group'),
      field: 'group',
    },
    {
      title: $t('sys.apis.serviceName'),
      field: 'serviceName',
    },
    {
      title: $t('sys.apis.description'),
      field: 'description',
      formatter: ({ cellValue }: any) => $t(`sys.${cellValue}`), // 国际化
    },
    {
      title: $t('sys.apis.method'),
      field: 'method',
    },
    // 状态
    {
      title: $t('sys.apis.must'),
      field: 'status',
      slots: {
        default: ({ row }: any) => {
          return (
            <ElTag type={row.disabled ? 'success' : 'info'}>
              {row.disabled ? $t('sys.menu.on') : $t('sys.menu.off')}
            </ElTag>
          );
        },
      },
    },
    // 创建时间
    {
      title: $t('sys.menu.createTime'),
      field: 'createTime',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
    {
      title: $t('sys.menu.operation'),
      width: 200,
      slots: { default: 'action' },
    },
  ],
  // 远程请求数据
  proxyConfig: {
    ajax: {
      query: async (page: any) => {
        const { currentPage, pageSize } = page.page;
        return await getApiListData({ page: currentPage, pageSize });
      },
    },
  },
});

// 表格事件
const gridEvents = {};

// 表格实例
const [Grid] = useVbenVxeGrid({
  gridEvents,
  gridOptions: tableconfig.value,
});
// 表单配置项
const formColumns = computed(() => [
  {
    label: $t('sys.apis.path'), // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },

  {
    label: $t('sys.apis.serviceName'), // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
  {
    label: $t('sys.apis.group'), // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
  {
    label: $t('sys.apis.description'), // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
  {
    label: $t('sys.apis.method'), // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
]);

// 新增事件
const addApi = () => {
  drawerApi.setState({ title: $t('sys.apis.addApi') });
  drawerApi.setData({ type: 'addData' });
  drawerApi.open();
};

// 编辑事件
const EditHandle = (row: any) => {
  drawerApi.setState({ title: $t('sys.apis.editApi') });
  drawerApi.setData({ type: 'editData', id: row.id });
  drawerApi.open();
};

// 提交表单
// const submitForm = async () => {
//   await formRef.value.formRef.validate();
// };
</script>
